<template>
  <div class="category">
    <!-- 头部 -->
    <div class="top">
      <div class="inp" @click="ss">搜索商品,共195157款好物</div>
    </div>
    <scroll-view scroll-y show-scrollbar enable-flex class="footer flex">
      <!-- 左侧 -->
      <div class="left">
        <div class="item" :class="categoryId==item.id?'active':''" @click="handler" :data-id="item.id" v-for="(item,index) in categoryArr.categoryL1List" :key="item.id">{{item.name}}</div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <div class="tj" v-if="categoryId==11">
          <image class="vc" :src="categoryArr.currentCategory?.bannerList[0].picUrl" mode="widthFix"/>
          <div class="list flex">
            <div class="item flex_c" v-for="(item,index) in categoryArr.categoryL2List" :key="item.id">
              <image class="img" :src="item.bannerUrl" mode="widthFix"/>
              <div class="subtitle">{{item.name}}</div>
            </div>
          </div>
        </div>
        <div class="goodsList" v-else>
          <v-goods :list="categoryInfo" :tp="categoryTp"></v-goods>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script setup lang="ts">
//引入vue相关
import {ref} from 'vue'
//引入api请求
import {reqCategory,reqCategoryInfo} from '@/api/index'
//引入uni相关
import {onLoad} from '@dcloudio/uni-app'

//定义响应式数据
//分类列表数据
let categoryArr = ref<any>({})
//分类Id
let categoryId = ref<any>(11)
//分类详情数据
let categoryInfo = ref<any>([])
//分类顶部图片
let categoryTp = ref<any>('')

//定义方法
//获取分类列表
const getCategory = async ()=>{
  let result = await reqCategory()
  console.log(result.data);
  //存分类列表数据
  categoryArr.value = result.data
}
//分类列表点击事件
const handler = (e:any)=>{
  //储存分类ID
  categoryId.value = e.currentTarget.dataset.id
  //获取分类详情数据
  getCategoryInfo()
}
//获取分类详情
const getCategoryInfo = async ()=>{
  let result = await reqCategoryInfo(categoryId.value)
  Object.assign(categoryInfo.value,result.data.categoryGroupList)
  categoryTp.value = result.data.currentCategory.bannerUrl
  console.log(result.data);
}
//搜索的回调
const ss = ()=>{
  uni.navigateTo({
    url: '/pages/search/search'
  })
}


//生命周期钩子
//页面挂载
onLoad(() => {
  //获取分类列表
  getCategory()
})

</script>

<style scoped lang="less">
.category{
  width: 100%;
  .top{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx;
    border-bottom: 1px solid #ccc;
    background-color: white;
    z-index: 999;
    .inp{
      text-align: center;
      padding: 14rpx 0;
      font-size: 28rpx;
      background-color: #e8e8e8;
      border-radius: 10rpx;
      color: #777777;
    }
  }
  .footer{
    position: absolute;
    top: 110rpx;
    left: 0;
    .left{
      width: 24%;
      padding: 10rpx;
      border-right: 1px solid #ccc;
      .item{
        padding: 20rpx;
        font-size: 28rpx;
        box-sizing: border-box;
      }
      .active{
        border-left: 2px solid red;
        background-color: #e8e8e8;
      }
    }
    .right{
      width: 76%;
      padding: 30rpx;
      box-sizing: border-box;
      .tj{
        width: 100%;
        .vc{
          width: 100%;
          height: 150rpx;
          margin-bottom: 20rpx;
        }
        .list{
          width: 100%;
          flex-wrap: wrap;
          .item{
            width: 28%;
            margin-left: 20rpx;
            margin-bottom: 20rpx;
            align-items: center;
            .img{
              width: 100%;
            }
            .subtitle{
              font-size: 28rpx;
            }
          }
        }
      }
    }
  }
}

</style>